<template>
  <div class="container">
    <van-nav-bar fixed title="我的">
      <template #right>
        <van-icon
          @click="$router.push('/user/edit')"
          name="setting-o"
          size="18"
          v-if="hasLogin"
        />
      </template>
    </van-nav-bar>
    <van-row align="center" type="flex" class="user-bg" v-if="hasLogin">
      <!-- 左侧 -->
      <van-image
        round
        class="user-img"
        :src="$getUrl(userInfo.icon) || 'https://img01.yzcdn.cn/vant/cat.jpeg'"
      />
      <!-- 右侧 -->
      <div class="text">
        <h3>{{ userInfo.username }}</h3>
        <p>{{ userInfo.notes || "我就我是,不一样的烟火！" }}</p>
      </div>
    </van-row>
    <van-row
      align="center"
      @click="$router.push('/login')"
      justify="space-between"
      type="flex"
      class="user-bg"
      v-else
    >
      <!-- 左侧 -->
      <van-row type="flex" align="center">
        <van-image round class="user-img" src="" error-icon="user-o" />
        <div class="text">
          <h3>请登录</h3>
          <p>登录之后更加精彩！</p>
        </div>
      </van-row>
      <!-- 右侧 -->
      <van-icon name="arrow" size="30px" />
    </van-row>

    <van-grid :column-num="3" v-if="hasLogin">
      <van-grid-item
        icon="like-o"
        :text="'收藏' + userData.collectNum + '篇'"
      />
      <van-grid-item icon="good-job-o" :text="`点赞${userData.zanNum}篇`" />
      <van-grid-item
        icon="newspaper-o"
        :text="`发布${userData.articleNum}篇`"
      />
    </van-grid>
    <van-cell-group>
      <van-cell
        icon="send-gift-o"
        to="/user/article"
        title="我的文章"
        is-link
      />
      <van-cell icon="diamond-o" to="/user/sc" title="我的收藏" is-link />
      <van-cell icon="thumb-circle-o" to="/user/zan" title="我的点赞" is-link />
    </van-cell-group>
    <van-cell-group class="quit-btn" v-if="hasLogin">
      <van-button type="info" block @click="quit">立即退出</van-button>
    </van-cell-group>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
export default {
  data () {
    return {
      hasLogin: false,
      userData: {},
      userInfo: {}
    }
  },
  created () {
    this.hasLogin = localStorage.getItem('USER_INFO')
  },
  async mounted () {
    const res = await getUserInfo()
    this.userData = res.data
    this.userInfo = res.data.userInfo
  },
  methods: {
    async quit () {
      try {
        await this.$dialog.confirm({
          title: '提示',
          message: '确定退出码？退出资料将会清空'
        })
        this.$store.commit('user/removeTokne')
        localStorage.removeItem('USER_INFO')
        this.hasLogin = false
      } catch (error) {
        console.log(error);
      }

    }
  },
}
</script>
<style scoped lang="less">
.user-bg {
  background: #1989fa;
  color: #fff;
  padding: 30px;
  .text {
    margin-left: 30px;
    h3 {
      font-size: 30px;
    }
  }
}
.van-hairline--bottom::after {
  border: none;
}
.user-img {
  width: 150px;
  height: 150px;
  border: 6px solid #fff;
  background-color: #fff;
}
.quit-btn {
  margin: 32px;
}
</style>
